<template>
    <div class="container">
        <el-row class="wrap-search">
            <el-button  icon="el-icon-edit" @click="" type="primary" size="medium" @click="dialogVisible = true">新建分类</el-button>
        </el-row>
        <!--<el-row class="wrap-search">-->
            <!--<div class="search-item">-->
            <!--<div class="search-title">用户昵称：</div>-->
            <!--<el-input style="width: 200px;" class=""-->
            <!--placeholder="请输入用户昵称"-->
            <!--v-model="configList.param.nicknameLike" ></el-input>-->
            <!--</div>-->
            <!--<el-button  class="search-btn" type="primary" @click="getList()">查询</el-button>-->
        <!--</el-row>-->
        <div class="">
            <el-table
                    border
                    :data="configList"
                    style="width: 100%">
                <el-table-column
                        align="center"
                        prop="name"
                        label="名称"
                        width="">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop=""
                        label="操作"
                        width="">
                    <template slot-scope="scope">
                        <el-button  icon="el-icon-edit" @click="handleEdit(scope.row)" type="primary" size="small">编辑</el-button>
                        <el-button  icon="el-icon-delete" @click="handleDel(scope.row.id)" type="danger" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog
                title="编辑/创建分类"
                :visible.sync="dialogVisible"
                size="tiny"
        >
            <el-input v-model="name" placeholder="请输入分类名称"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleConfirm">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
	let CONSTANT = require('../constant/constant.js');
	let common = require("../common.js");
	import TableList from "./common/my-table";
	export default {
		data() {
			return {
				name: "",
				configList: [],
				dialogVisible:false,
				dialogVisible1:false,
				imgUrl:'',
				upLoadUrl:'',
				dataList:[],
				provinceList:[],
				cityList:[],
				statusArr:{
					'on':'上架',
					'off':'下架'
				},
				statusArrList:[
					{
						item:'',
						value:'全部'
					},
					{
						item:'ing',
						value:'众筹中'
					},
					{
						item:'success',
						value:'众筹成功'
					},
					{
						item:'fail',
						value:'众筹失败'
					},
					{
						item:'off',
						value:'下架'
					}
				],
				id: ""
			}
		},
		components: {
			'table-list': TableList
		},
		watch:{
			'configList.param.provinceCode':function(val){
				this.cityList = [];
				this.configList.param.cityCode  = ''
//            this.getCityList()
			}
		},
		created(){

		},
		mounted() {
            this.getList()
		},
		methods: {
			getList(){
				let  url = CONSTANT.URL.classList;
				common.requestGetAjax(url,{},{},(res)=>{
					if(res.status == 0){
						this.configList = res.data
					}else{
						this.$message({
							message: res.msg,
							type: 'warning'
						});
					}
				})
			},
			_dateFormate(value) {
				return common.dateFormate(value)
			},
			handleEdit(row) {
				this.id = row.id
				this.name = row.name
                this.dialogVisible = true
            },
			handleDel(id) {
				this.$confirm('确定删除?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let  url = CONSTANT.URL.classDel,
						param = {category_id: id}
					common.requestGetAjax(url,{},param,(res)=>{
						if(res.status == 0){
							this.$message({
								type: 'success',
								message:res.msg
							});
							this.getList();
						}else{
							this.$message({
								message: res.msg,
								type: 'warning'
							});
						}
					})

				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
            },
			handleConfirm() {
				if (this.id) {
					let url = CONSTANT.URL.classEdit
					common.requestAjax(url,{category_id: this.id, name: this.name},{},(res)=>{
						if(res.status == 0){
							this.$message({
								type: 'success',
								message:res.msg
							});
							this.id = ""
                            this.name = ""
                            this.dialogVisible = false
							this.getList();
						}else{
							this.$message({
								message: res.msg,
								type: 'warning'
							});
						}
					})
                } else {
					let url = CONSTANT.URL.classCreate
					common.requestAjax(url,{name: this.name},{},(res)=>{
						if(res.status == 0){
							this.$message({
								type: 'success',
								message:res.msg
							});
							this.id = ""
							this.name = ""
							this.dialogVisible = false
							this.getList();
						}else{
							this.$message({
								message: res.msg,
								type: 'warning'
							});
						}
					})
                }

            },
			imgClick(url){
				this.imgUrl = url;
				this.dialogVisible = true;
			},
			showPage(id){
				this.dialogVisible1 = true;
				this.getNums(id)
			},
			hotBtn(id,state){
				let  url = CONSTANT.URL.CAR.SAVEHOT,
					dataForm = {},
					data = {
						isHot:state?'':1,
						id:id
					};
				common.requestAjax(url,JSON.stringify(data),dataForm,(res)=>{
					if(res.status == 200){
						this.$message({
							type: 'success',
							message:res.msg
						});
						this.getList();
					}else{
						this.$message({
							message: res.msg,
							type: 'warning'
						});
					}
				})
			},
			delLevel(id){
				this.$confirm('确定删除?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let  url = CONSTANT.URL.USERCORE.DELETEITEM,
						param = {id: id}
					common.requestAjax(url,{},param,(res)=>{
						if(res.status == 200){
							this.$message({
								type: 'success',
								message:res.msg
							});
							this.getList();
						}else{
							this.$message({
								message: res.msg,
								type: 'warning'
							});
						}
					})

				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			upBtn(id){
				this.$confirm('确定上架?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let  url = CONSTANT.URL.CAR.SETDELETE,
						param = {id:id,status:'on'}
					common.requestAjax(url,JSON.stringify(param),null,(res)=>{
						if(res.status == 200){
							this.$message({
								type: 'success',
								message:res.msg
							});
							this.getList();
						}else{
							this.$message({
								message: res.msg,
								type: 'warning'
							});
						}
					})

				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消上架'
					});
				});
			},
			downBtn(id){
				this.$confirm('确定下架?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let  url = CONSTANT.URL.CAR.SETDELETE,
						param = {id:id,status:'off'}
					common.requestAjax(url,JSON.stringify(param),null,(res)=>{
						if(res.status == 200){
							this.$message({
								type: 'success',
								message:res.msg
							});
							this.getList();
						}else{
							this.$message({
								message: res.msg,
								type: 'warning'
							});
						}
					})

				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消下架'
					});
				});
			},
			handleRemove(file, fileList) {      // 图片上传
				let deleteUrl = file.url;
				let list = this.information.images;
				list.forEach(function(item,index){
					if(item.fileUrl == deleteUrl){
						list.splice(index,1);
					}
				})
				console.log(list);
				this.information.images = list;
			},
			handlePictureCardPreview(file) {
				this.dialogImageUrl = file.url;
				this.dialogVisible = true;
			},
			handleFileSuccess(res, file) {
				if(res.status == 200){
					let picItem = res.data.bussData;
					this.information.images.push(picItem);
					this.fileListChange();
				}
			},
			selectTable(val) {
				console.log(val)
				this.ids = []
				val.map( item => {
					this.ids.push(item.id)
				})
			},
			delAll() {
				if (!this.ids.length) {
					this.$message({
						type: 'warning',
						message: '请选择批量删除的记录'
					});
					return false;
				}
				this.$confirm('确定删除?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let url = CONSTANT.URL.USERCORE.DELETES;
					common.requestAjax(url, {}, {ids: this.ids}, (res) => {
						if(res.status == 200){
							this.$message({
								type: 'success',
								message:res.msg
							});
							this.getList();
						}else{
							this.$message({
								message: res.msg,
								type: 'warning'
							});
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			}
		}
	}
</script>

<style lang="scss">
    .container {
        .wrap-search{
            margin-bottom: 20px;
            .search-item{
                float: left;
                margin-right: 20px;
                margin-top: 20px;
                .el-input,.el-select{
                    width: 180px;
                }
            }
            button{
                float: left;
                margin-top: 20px;
            }
            .search-title{
                display: inline;
                width: 100px;
                height: 36px;
                line-height: 36px;
                text-align: right;
                margin-bottom: 20px;
                margin-right: 10px;
            }
        }
        .el-table__row{
            .cell{
                button{
                    margin-top: 10px;
                }
            }
            video{
                width: 100px;height: auto;
            }
            img.video-img{
                width: 60px;height: 60px;
                cursor: pointer;
                border-radius: 30px;
            }
        }
        .pagination {
            text-align: center;
            width: 80%;
            margin-top: 60px;
        }
        .el-dialog__body{
            img{
                display: block;
                margin: 0 auto;
            }
        }
        .user-num{
            color:#409EFF;
            cursor: pointer;
        }

        .avatar{
            width: 50px!important;
            height: 50px;
            border-radius: 50%;
            -webkit-border-radius: 50%;
        }
    }
</style>
